<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
	<script type="text/javascript">
		# vue构造属性对象一览 #

		var vm = new Vue({
			// vue实例绑定的dom
			el: '#app',      

			// 实例数据
			data: {
				msg: 'Hello Vue!'
			},

			// 实例方法，与v-on结合使用
			methods: {
				test1: function(){

				}
			},

			// 过滤器
			filters: {
				test1: function(value){

				}
			},

			// 计算属性
			computed: {
				test1: function(){

				}
			},

			// 数据监视
			watch: {
				msg: function(newVal, oldVal){
					
				}
			},

			// 局部注册组件
			components: {
				child: {
					template: 'xxx'
				}
			}

			/**
			 * 
			 * 生命周期钩子
			 * 
			 */
			// 在vue实例化配置数据观测之前被调用
			beforeCreate: function(){
				console.log('beforeCreate');
				console.log(this.a);   // 这个阶段还没载入data数据，所以输出是undefined
			},
			// 这是在数据观测（data observer）被配置之后所触发的钩子
			created: function(){
				// this 指向 vm实例
				console.log('a is ' + this.a)
			},
			/**
			 * 假如实例化选项中没有el，则这几个钩子不会被触发
			 */
			// 创建vm.$el并且用它来替代“el”之前所处阶段触发钩子，mount就是组装的意思
			beforeMount: function(){
				console.log('beforeMount');
			},
			mounted: function(){
				console.log('mounted');
				this.a = 2;        // 在这里改变数据，能触发beforeUpdate()和updated()钩子
			},
			/**
			 * 当数据发生改变，触发下面的钩子
			 */
			beforeUpdate: function(){
				console.log('before data changes,a = '+this.a);
			},
			updated: function(){
				console.log('after data changes,a = '+this.a);
			},
			/**
			 * 当vm.$destroy()被调用时，触发下面的钩子			 
			 */
			beforeDestory: function(){
				console.log('beforeDestory');
			},
			destroyed: function(){
				console.log('vm has been destroyed!');
			}			
		})		
	</script>
</body>
</html>